=x= 🌵 CONTACT Page 寄信頁的「我不是機器人」驗證功能，後端實作。

Google reCAPTCHA 介紹 :

📌 Google reCAPTCHA 服務可用來判斷是否為真人使用，保護網站免受欺詐活動、垃圾郵件和濫用。

• 已停止服務的 V1 會由系統提供一個帶有英數字的隨機圖片，並要你識別後輸入文字內容。
• V2 為一個勾選框或無勾選框(背景執行)，會依網頁瀏覽使用行為辨別，如有疑慮則會彈出九宮格圖片要你選擇符合描述的圖片。
• V3 則是完全不會要使用者進行任何需要證明是否不是機器人的行為，網頁瀏覽時不會看到任何相關內容，僅會依行為傳送一個 0 ~ 1.0 之間的分數給後台，分數越低越可能是機器人，後台則需設定分數判斷邏輯進行對應行為，預設以 0.5 為區隔。
• 👀 官網介紹連結 : What is reCAPTCHA ?
• 👀 選用 V2 或 V3 可參考官網說明 : Should I use reCAPTCHA v2 or v3 ?

reCAPTCHA V2 實作 (勾選框) :

1. 註冊使用 reCAPTCHA : https://www.google.com/recaptcha/admin/create

• 👀 參考官網資料 : Using reCAPTCHA with ASP.NET

• 🌵 網域先填 localhost 方便測試。(本機端)

• 🌵 完成後跳轉網頁會產生一組公鑰 (public_key) 跟私鑰 (private_key)。

• 👺 測試時不需要申請 Google Cloud Platform 上的 reCAPTCHA Enterprise 金鑰，商用金鑰會有計量計價規定，如果不小心因為被導引到該頁面而申請了商用金鑰，建議可以先刪除，本人在把 code 推到 GitHub 備份時，收到 google 警告信才發現這件事(汗)。

2. Visual Studio > NuGet 套件管理員 > 管理方案的 NuGet 套件 > 安裝 RecaptchaNet

• 👀 RecaptchaNet 說明網址 : RecaptchaNet 3.1.0

3. 在 web.config 中的 <configuration> 內加入以下程式碼並填入公鑰及私鑰

<configuration>

<!-- Add code start -->
<appSettings>
    <!-- Your site key for your reCAPTCHA control -->
        <add key="RecaptchaSiteKey" value="這裡填入步驟1.註冊後取得之公鑰" />
    <!-- Your secret key for your reCAPTCHA control -->
    <add key="RecaptchaSecretKey" value="這裡填入步驟1.註冊後取得之私鑰" />
</appSettings>
<!-- Add code end -->

</configuration>

4. 在 .aspx 頁面工具箱拉入控制項並確認上方的 <%@ Page %> 下有新增一行 code 以加入設定

<!-- 上方自動產生的設定 -->
<%@ Register Assembly="Recaptcha.Web" Namespace="Recaptcha.Web.UI.Controls" TagPrefix="cc1" %>

<!-- Render recaptcha API script (非必要，同頁使用兩個以上時才需要)-->
<cc1:RecaptchaApiScript ID="RecaptchaApiScript1" runat="server" />
<!-- Render recaptcha widget -->
<cc1:RecaptchaWidget ID="Recaptcha1" runat="server" RenderApiScript="False" />

• 🧠 NuGet 成功安裝後重開專案，工具箱搜尋 Recaptcha 就會出現控制項，記得 .aspx 頁面要將畫面切到"設計"模式，"原始檔"模式可能會隱藏而找不到。

• 🌵 執行網頁需看到我不是機器人勾選框裡面無紅字錯誤，才是成功。

5. 網頁後置程式碼判斷邏輯程式碼 (可放在 Button_Click 事件中)

if (String.IsNullOrEmpty(Recaptcha1.Response)) {
    lblMessage.Visible = true;
    lblMessage.Text = "Captcha cannot be empty.";
}
else {
    var result = Recaptcha1.Verify();
    if (result.Success) {
        //此處可加入"我不是機器人驗證"成功後要做的事

    }
    else {
        lblMessage.Text = "Error(s): ";

        foreach (var err in result.ErrorCodes) {
            lblMessage.Text = lblMessage.Text + err;
        }
    }
}

6. 渲染網頁並確認驗證框無任何紅字，且點擊後會出現綠色打勾，完成~

本日總結 :

📌 稍微說明一下為什麼最後會介紹這個寫法，網路上可以查到的作法很多，比較混亂的是一開始試著查資源時，有可能查到的是舊的寫法、JavaScript 作法、其它語言，或者那是 MVC 不是 Web Forms，對於還沒有接觸 MVC 的人，如果關鍵字搜尋一直查到 MVC 建議加入 Web Forms 關鍵字；而我是因為看不太懂 Google 官網提供的寫法，於是從它建議的 Nuget 安裝一路往回去看 GitHub 提供的範例，範例裡相對 Google 有更完整的示範 code 可以看，多了些判斷到底我跟著這樣做可不可行，而不是複製貼上後，然後就沒有然後了，只能呆在原地動彈不得，這是比較特別想講的地方。

• 👀 上方的作法參考 NutGet 的 GitHub : https://github.com/tanveery/recaptcha-net

• 👀 上線申請 Google Cloud Platform : https://console.cloud.google.com/security/recaptcha

• 明日將介紹如何製作寄信功能。